body{
    background-color:#9C9B7A;
    margin:0px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
}
img:hover{
    animation:spin 3s linear 0s infinite;
    border-radius:10000px
}
#guitarpic1{
    grid-column:1/2;
    grid-row:3/4;
    margin-left:auto;
    margin-right:auto;

}
#guitarpic2{
    grid-column:2/3;
    grid-row:3/4;
    margin-left:auto;
    margin-right:auto;

}
#guitar3{
    grid-column:3/4;
    grid-row:3/4;
    margin-left:auto;
    margin-right:auto
}

#background1{
    background-image:linear-gradient(#9C9B7A 20%, #F5F5DC);
    grid-column:1/2;
    grid-row:2/4;
    margin:0px;
    text-align:center;
    color:#E1C3B1;
    border-left:2px solid black;
    border-right:1px solid black;
    border-top:2px solid black;
    border-top-left-radius: 30px;
    
}
#background2{
    background-image:linear-gradient(#9C9B7A 20%, #C36241);
    grid-column:2/3;
    grid-row:2/4;
    margin:0px;
    text-align:center;
    color:#CC5500;
    border-left:1px solid black;
    border-top:2px solid black;
    border-right:1px solid black
    
}
#background3{
   grid-column:3/4;
   grid-row:2/4;
   margin:0px;
   text-align:center;
   color:#800020;
   background-image:linear-gradient(#9C9B7A 20%, #9B6A4D);
   border-left:1px solid black;
   border-top:2px solid black;
   border-right:2px solid black;
   border-top-right-radius:30px
}
h1{
    background-image:radial-gradient( #F5F5DC, #9C9B7A,#C36241,#E1C3B1,#CC5500,#800020,#9C9B7A );
    grid-column:1/4;
    grid-row:1/2;
    margin:0px;
    text-align:center;
    color:#000000
}
nav a{
    text-decoration:none;
    font-size:large;
    color:rgb(141, 45, 232);
    padding:3px
}
nav{
    grid-row:1/2;
    grid-column:1/4;
    display:flex;
    flex-direction:column;
    text-align:center;
    margin-top:52px
}
nav a:hover{
    background-color:white;
    color:black
}
p{
    text-align:center;
    margin:0px;
    padding-top:15px

}
#p1{
    border-left:2px solid black;
    border-right:1px solid black;
    border-bottom:2px solid black;
    background-image: linear-gradient(#F5F5DC 30%,#9C9B7A  );


}
#p2{
    border-left:1px solid black;
    border-right:1px solid black;
    border-bottom:2px solid black;
    background-image: linear-gradient(#C36241 30%,#9C9B7A  );
    color:black;
}
#p3{
    border-left: 1px solid black;
    border-right:2px solid black;
    border-bottom:2px solid black;
    background-image: linear-gradient( #9B6A4D 30%,#9C9B7A  );
    color:black
}
@keyframes spin {
    0%{

    }
    100%{
        rotate: 360deg;
    }
}
@media (max-width:982px){
    body{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(7, 1fr);
    }
    
    h1{
        grid-column:1/2;
        grid-row:1/2;

    }
    nav{
        grid-column:2/3;
        grid-row:1/2;
        margin:0px
    }
    #background1{
        grid-column:1/3;
        grid-row:2/4;
        border:none
    }
    #guitarpic1{
        grid-column:1/2;
        grid-row:2/4;
        margin-top:auto;
        margin-bottom:auto
    }
    #p1{
        grid-column:2/3;
        grid-row:2/4;
        padding:0px;
        border:none;
        background-image:none;
        margin-bottom:auto;
        margin-top:auto;
        font-size:small
    }
    #background2{
        grid-column:1/3;
        grid-row:4/6;
        border:none

    }
    #guitarpic2{
        grid-column:1/2;
        grid-row:4/6;
        margin-top:auto;
        margin-bottom:auto
    }
    #p2{
        grid-column:2/3;
        grid-row:4/6;
        background-image:none;
        margin-top:auto;
        margin-bottom:auto;
        border:none;
        padding:0px;
        font-size:small
    
    }

#background3{
grid-column:1/3;
grid-row:6/8;
border:none

}
#guitar3{
grid-column:1/2;
grid-row:6/8;
margin-top:auto;
margin-bottom:auto
}
#p3{
grid-column:2/3;
grid-row:6/8;
margin-top:auto;
margin-bottom:auto;
background-image: none;
border:none;
font-size:small
}
}
@media(max-width:700px){
    body{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(8, 1fr);
    }
    h1{
        grid-column:1/2;
        grid-row:1/2;

    }
    nav{
        grid-column:1/2;
        grid-row:2/3;
        margin-bottom:auto;
        margin-top:auto

    }
    nav a{
        font-size:x-large;
     margin:20px
    }
    #background1{
        grid-column:1/2;
        grid-row:3/4;
        border-top:3px solid white;
        border-radius:0px
    }
    #guitarpic1{
        grid-column:1/2;
        grid-row:3/4;
        margin-bottom:0px
        
    }
    #p1{
        grid-column:1/2;
        grid-row:4/5;
        border:3px solid white;
       margin:0px;
      padding-top:50px;
      
      
    }
    #background2{
        grid-column:1/2;
        grid-row:5/6;

    }
    #guitarpic2{
        grid-column:1/2;
        grid-row:5/6;
        margin-bottom:0px

    }
    #p2{
        grid-column:1/2;
        grid-row:6/7;
        border:3px solid white;
       margin:0px;
      padding-top:50px;
      font-size:medium
    
    }

#background3{
grid-column:1/2;
grid-row:7/8;

}
#guitar3{
grid-column:1/2;
grid-row:7/8;

}
#p3{
grid-column:1/2;
grid-row:8/9;
border:3px solid white;
       margin:0px;
      font-size:medium;
      padding-top:50px

}
}